import React, { useState, useEffect } from 'react';
import { Row, Col, Card } from 'antd';
import { Progress } from '@ant-design/charts';
import ECharts from 'echarts-for-react';
import Map from './components/ChinaMap';
import Device from './components/DeviceCard';
import Monitor from './components/Monitoring';
import MinPro from './components/MinProgress';
import cloneDeep from 'lodash.clonedeep';

import styles from './index.less';

const { Meta } = Card;

const screen: React.FC = () => {

    const option2 = {
        grid: {
            top: 30,
            left: 30,
            right: 30,
            bottom: 30
        },
        xAxis: {
            type: 'category',
            data: ['8-21', '8-22', '8-23', '8-24', '8-25', '8-26', '8-27'],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd',//左边线的颜色
                }
            },
        },
        yAxis: {
            type: 'value',
            scale: true,
            max: 20,
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd',//左边线的颜色
                }
            },
        },
    };

    const DEFAULT_OPTION = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: 30,
            left: 30,
            right: 30,
            bottom: 30
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        visualMap: {
            show: false,
            min: 0,
            max: 1000,
            color: ['#BE002F', '#F20C00', '#F00056', '#FF2D51', '#FF2121', '#FF4C00', '#FF7500',
                '#FF8936', '#FFA400', '#F0C239', '#FFF143', '#FAFF72', '#C9DD22', '#AFDD22',
                '#9ED900', '#00E500', '#0EB83A', '#0AA344', '#0C8918', '#057748', '#177CB0']
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: (function () {
                    let now = new Date();
                    let res = [];
                    let len = 52;
                    while (len--) {
                        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                        now = new Date(now - 2000);
                    }
                    return res;
                })(),
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd',//左边线的颜色
                    }
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                max: 20,
                min: 0,
                boundaryGap: [0.2, 0.2],
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd',//左边线的颜色
                    }
                },
            },
        ],
        series: [
            {
                name: '实时电流',
                type: 'line',
                data: (function () {
                    let res = [];
                    let len = 0;
                    while (len < 52) {
                        res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                        len++;
                    }
                    return res;
                })()
            }
        ]
    };

    const [option, setOption] = useState(DEFAULT_OPTION);

    function fetchNewData() {
        const axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        const newOption = cloneDeep(option); // immutable
        const data0 = newOption.series[0].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 10));
        newOption.xAxis[0].data.shift();
        newOption.xAxis[0].data.push(axisData);
        setOption(newOption);
    }

    useEffect(() => {
        const timer = setInterval(() => {
            fetchNewData();
        }, 1000);
        return () => clearInterval(timer);
    });

    return (
        <div className={styles.Container}>
            <div className={styles.Header}>
                <div className={styles.Title}>工厂智能设备监控管理系统</div>
            </div>
            <div>
                <Row>
                    <Col span={6}>
                        <Row>
                            <Card className={styles.Card} title="项目总览" style={{ height: 200 }}>
                                <div className={styles.line}>
                                <Row gutter={16}>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>项目总览</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>1</div>} />
                                        </Card>
                                    </Col>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>设备总览</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>1</div>} />
                                        </Card>
                                    </Col>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>巡检次数</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>0</div>} />
                                        </Card>
                                    </Col>
                                </Row>
                                <Row gutter={16} style={{marginTop: '16px'}}>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>报警总数</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>0</div>} />
                                        </Card>
                                    </Col>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>已解决报警</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>0</div>} />
                                        </Card>
                                    </Col>
                                    <Col span={8} >
                                        <Card cover={<div style={{ textAlign: 'center', padding: '5px' }}>未解决报警</div>}>
                                            <Meta title={<div style={{ textAlign: 'center', padding: '5px', color: '#47e7ff' }}>0</div>} />
                                        </Card>
                                    </Col>
                                </Row>
                                </div>
                            </Card>
                        </Row>
                        <Row>
                            <Card className={styles.Card} title="实时监测" style={{ height: 300 }}>
                                <Row>
                                    <Col span={12}><Monitor style={{ height: 350, width: '160%', margin: '-40%', position: 'absolute' }} /></Col>
                                    <Col span={12}>
                                        <MinPro name={'正常'} quantity={25} percent={1} line={2} style={{ width: '100%', color: '#5B8FF9' }} />
                                        <MinPro name={'离线'} quantity={25} percent={1} line={2} style={{ width: '100%', color: 'red' }} />
                                        <MinPro name={'正常'} quantity={25} percent={1} line={2} style={{ width: '100%', color: '#ddd' }} />
                                    </Col>
                                </Row>
                            </Card>
                        </Row>
                        <Row>
                            <Card className={styles.Card} title="设备管理" style={{ height: 420 }}>
                                <Device style={{ height: 380, width: '100%', marginTop: 5 }} />
                            </Card>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row><Map style={{ height: 580, width: '100%' }} /></Row>
                        <Row><ECharts option={option} style={{ height: 400, width: '100%' }} /></Row>
                    </Col>
                    <Col span={6}>
                        <Row>
                            <Card className={styles.Card} title="报警分类" style={{ height: 460 }}>
                                <MinPro name={'过载'} quantity={25} percent={0.5} line={20} style={{ width: '100%', color: '#a17ee6' }} />
                                <MinPro name={'断相'} quantity={25} percent={0.2} line={20} style={{ width: '100%', color: '#e57e40' }} />
                                <MinPro name={'不平衡'} quantity={25} percent={0.75} line={20} style={{ width: '100%', color: '#e54040' }} />
                                <MinPro name={'接地'} quantity={25} percent={0.1} line={20} style={{ width: '100%', color: '#2cdbe3' }} />
                                <MinPro name={'短路'} quantity={25} percent={0.2} line={20} style={{ width: '100%', color: '#ac2066' }} />
                                <MinPro name={'正常'} quantity={25} percent={0.6} line={20} style={{ width: '100%', color: '#5B8FF9' }} />
                            </Card>
                        </Row>
                        <Row>
                            <Card className={styles.Card} title="近7日报警统计" style={{ height: 480 }}>
                                <ECharts option={option2} style={{ height: 400, width: '100%' }} />
                            </Card>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
    );
};

export default screen;